<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no">
    <link rel="stylesheet" href="../lib/css/common.css?s=asdfasdf">
    <link href="../lib/css/video-js.min.css" rel="stylesheet">
    <script src="../lib/js/jquery-3.3.1.min.js"></script>
    <script src="../lib/js/video.min.js"></script>
    <title></title>
</head>
<body>
<video id="myVideo"></video>
<video id="myVideoSubtitle" class="video-subtitle">
    <source src="./videos/subtitle.mp4" type="audio/mp4"/>
</video>
<audio loop id="myAudio">
    <source src="../lib/source/bg.ogg" type="audio/ogg">
</audio>
<svg id="mainSvg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
     width="1920" height="1080"
     viewBox="0 0 1920 1080">
    <defs>
        <pattern id="soundOn" patternUnits="userSpaceOnUse" width="100" height="100">
            <image xlink:href="../lib/images/sound.png" x="0" y="0" width="104" height="105"/>
        </pattern>
        <pattern id="soundOff" patternUnits="userSpaceOnUse" width="100" height="100">
            <image xlink:href="../lib/images/sound-off.png" x="0" y="0" width="104" height="105"/>
        </pattern>
        <pattern id="wordOn" patternUnits="userSpaceOnUse" width="100" height="100">
            <image xlink:href="../lib/images/word.png" x="0" y="0" width="104" height="105"/>
        </pattern>
        <pattern id="wordOff" patternUnits="userSpaceOnUse" width="100" height="100">
            <image xlink:href="../lib/images/word-off.png" x="0" y="0" width="104" height="105"/>
        </pattern>
    </defs>
    <g title="字幕" id="gWord"></g>
    <g title="帮助" transform="translate(410,211)" id="gHelp" class="g-help">
        <image xlink:href="../lib/images/help-text.png" x="0" y="0" width="1100" height="658"/>
        <image xlink:href="../lib/images/xiaofeifei.png" x="45" y="-46" width="146" height="156"/>
        <image class="img-btn" id="btnCloseHelp" xlink:href="../lib/images/x.png" x="1027" y="23" width="37"
               height="36"/>
    </g>
    <g title="标题" transform="translate(0,0)">
        <rect x="0" y="0" class="r-control" width="1920" height="80"/>
        <image xlink:href="../lib/images/logo.png" x="51" y="18" width="144" height="44"/>
        <text id="txtTitle" class="txt-title" x="960" dominant-baseline="middle" text-anchor="middle" y="45">Good
            morning!
        </text>
    </g>
    <g title="控制台" transform="translate(0,958)">
        <rect x="0" y="0" class="r-control" width="1920" height="122"/>
        <g transform="translate(37,6)" id="btnP" class="btn-play pause">
            <g class="play-item">
                <image class="img-btn" id="btnPlay" title="播放" xlink:href="../lib/images/play.png" x="0" y="0"
                       width="104" height="107"/>
                <text class="ctrl-btn-txt" x="28" y="106">play</text>
            </g>
            <g class="pause-item">
                <image class="img-btn" id="btnPause" title="停止" xlink:href="../lib/images/pause.png" x="0" y="0"
                       width="104"
                       height="107"/>
                <text class="ctrl-btn-txt" x="20" y="106">pause</text>
            </g>
        </g>
        <g title="进度条" transform="translate(171,44)">
            <rect x="0" y="0" fill="#ffffff" width="710" height="5"/>
            <rect x="0" y="0" id="progressBar" fill="#fff333" width="0" height="5"/>
            <rect class="img-btn" x="0" y="-8" id="btnProgressBar" fill="#ffffff" width="10" height="23"/>
        </g>
        <g transform="translate(900,54)">
            <text id="txtCurrentTime" class="txt" x="0" y="0">00:00</text>
            <text class="txt" x="65" y="0">|</text>
            <text id="txtTotalTime" class="txt" x="85" y="0">00:00</text>
        </g>
        <g transform="translate(1084,8)">
            <g class="btn-play_rate" transform="translate(0,0)" data-val="0.8" title="0.8倍播放" id="btnPlayRate1">
                <image class="img-btn btn-play_rate_img-on"
                       xlink:href="../lib/images/Bitmap3.png"
                       x="0" y="0" width="109" height="109"/>
                <image class="img-btn btn-play_rate_img-off"
                       xlink:href="../lib/images/Bitmap3-off.png"
                       x="0" y="0" width="109" height="109"/>
                <text class="ctrl-btn-txt" x="35" y="106">0.8×</text>
            </g>
            <g class="btn-play_rate active" transform="translate(109,0)" title="1.0倍播放" data-val="1.0"
               id="btnPlayRate2">
                <image class="img-btn btn-play_rate_img-on"
                       xlink:href="../lib/images/Bitmap1.png"
                       x="0" y="0" width="109" height="109"/>
                <image class="img-btn btn-play_rate_img-off"
                       xlink:href="../lib/images/Bitmap1-off.png"
                       x="0" y="0" width="109" height="109"/>
                <text class="ctrl-btn-txt" x="35" y="106">1.0×</text>
            </g>
            <g class="btn-play_rate" transform="translate(218,0)" title="1.2倍播放" data-val="1.2" id="btnPlayRate3">
                <image class="img-btn btn-play_rate_img-on"
                       xlink:href="../lib/images/Bitmap2.png"
                       x="0" y="0" width="109" height="109"/>
                <image class="img-btn btn-play_rate_img-off"
                       xlink:href="../lib/images/Bitmap2-off.png"
                       x="0" y="0" width="109" height="109"/>
                <text class="ctrl-btn-txt" x="35" y="106">1.2×</text>
            </g>
        </g>
        <g transform="translate(1592,6)">
            <g transform="translate(0,0)">
                <rect title="音量" x="0" y="0" id="btnSound" class="btn-sound img-btn" width="104" height="105"/>
                <text class="ctrl-btn-txt" x="23" y="104">sound</text>
            </g>
            <g transform="translate(97,0)">
                <rect title="文字" x="0" y="0" id="btnWord" class="btn-word img-btn" width="104" height="105"/>
                <text class="ctrl-btn-txt" x="13" y="104">substitle</text>
            </g>
            <g transform="translate(190,0)">
                <image title="帮助" class="img-btn " id="btnHelp" xlink:href="../lib/images/help.png" x="0" y="0"
                       width="104"
                       height="105"/>
                <text class="ctrl-btn-txt" x="35" y="104">help</text>
            </g>
        </g>
    </g>
</svg>
<div id="loading" class="loading active"></div>
<script src="./js/config.js"></script>
<script src="../lib/js/index-test.js"></script>
</body>
</html>
